

import { Select } from 'antd';
import './forms.scss';
import { useFormItemInit } from './hooks';
import { SelectProps } from 'antd/es/select';
import { FormItemBaseProps } from './interface';
import React from 'react';
import { useDrag } from './drop.hooks';
import Readonly from './Readonly';
import { Utils } from '../../utils/utils';
import { Components } from '../..';




interface IProps extends FormItemBaseProps {
}
export default function MySelect(props: IProps) {
    const { formControl, className = '', style = {} } = props;
    const {
        value, setValue,
        readonly,
        placeholder,
        outerClassName,
        options,
        layout,
        showError,
        outerStyle,
        labelStyle,
        selectorStyle,
        color,
    } = useFormItemInit(formControl, className, style);

    const [displayValue, setDisplayValue] = React.useState(value);
    React.useEffect(() => {
        const options = formControl.options;
        if (options?.length) {
            const option = options.find(v => v.value === value);
            if (option) {
                setDisplayValue(option.label);
            }
        }
    }, [value]);

    const onSelectChange = (val: string) => {
        setValue(val);
        formControl.setValue(val, 'user');
    };

    /** 随机 className */
    const [randomClassName] = React.useState(`select-${Utils.getRandomChars(4)}`);

    const selectProps: SelectProps = {
        placeholder: (placeholder || '请选择'),
        value: value,
        className: `select ${randomClassName}`,
        options,
        allowClear: formControl.controlData.allowClear ?? true,
        onChange: onSelectChange,
        disabled: readonly,
        status: showError ? 'error' : undefined,
        // status: 'error',
        suffixIcon: formControl.controlData.suffix ?? undefined,
        mode: formControl.controlData.multiple ? "multiple" : undefined,
        style: selectorStyle,
        size: formControl.controlData.size ?? 'middle', // large | middle | small
        // open: false,
    };

    /** 拖拽排序 */
    const dropRef = React.useRef<HTMLDivElement>(null);
    useDrag({ dropRef, formControl });
    /** 设置颜色 */
    const renderColor = () => {
        if (color) {
            return (
                <style>
                    {`
                        .${randomClassName} .ant-select-selector {
                            border-color: ${color} !important;
                        }
                    `}
                </style>
            )
        }
    }

    return (
        <>
            {renderColor()}
            <div component-name='form-item' className={outerClassName} style={outerStyle} ref={dropRef}>
                <div className={`field ${layout}`}>
                    <Components.forms.FormLabel formControl={formControl} style={labelStyle} />
                    <div className='control'>
                        <div className="value">
                            {
                                readonly ? <Readonly formControl={formControl} /> : <Select {...selectProps} />
                            }
                        </div>
                    </div>
                </div>

            </div>
        </>
    )
}
